<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
      <div id="app">
        <input type="button" value="不显示" @click="show">
        <p v-if="showP">1.能够被控制显示还是不显示的p标签</p>
        <p v-if="num1">2.如果{{num1}}是0不显示</p>
        <p v-if="num2">3.如果{{num2}}是0不显示</p>
        <p v-if="num2">4.如果{{num2}}是0不显示</p>
        <p v-if="num2">5. 如果{{num2}} > 3 显示</p>
        <p v-if="str1">6.如果'{{str1}}'是空字符串不显示</p>
        <p v-if="str2">7.如果'{{str2}}'是空字符串 不显示</p>
        <p v-if="str2.indexOf('c') > 0">8. 含有有c，显示</p>
        <p v-if="nan">9. NaN</p>
        <p v-if="obj1">10.null</p>
        <p v-if="obj2">11.undefined</p>
        <p v-show="showP">12.能够被指控显示还是不显示p标签</p>
        <p v-if="showP">13.showP true,显示</p>
        <p v-else>13,showP false ,显示</p>
        <p v-if="rTure()">14函数返回true,也行</p>
      </div>

      <script type="text/javascript">
        var m = {
            showP:true,
            num1:0,
            num2:5,
            str1:'',
            str2:'ab',
            nan:NaN,
            obj1:null,
            obj2:undefined
        };

        var vm = new Vue({
            el:'#app',
            data:m,
            methods:{
                show:function(){
                    this.showP=!this.showP;
                },
                rTure:function(){
                    return true;
                }
            }
        });
        document.write("&#105;&#116;&#106;&#99;&#56;&#46;&#99;&#111;&#109;&#25910;&#38598;&#25972;&#29702;");
      </script>
</body>
</html>